import React, { useEffect, useState } from "react";
// import Login from "../Login";
import { Link, Outlet, useLocation, matchRoutes } from "react-router-dom";
import "./home.scss";
import logo from "../../u20.png";
import { Layout, Menu, Button } from "antd";
import router from "../../router";
import moment from "moment";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  DatabaseOutlined,
  ProfileOutlined,
  TeamOutlined,
  FileSearchOutlined,
  SyncOutlined,
} from "@ant-design/icons";

const { Header, Sider, Content } = Layout;

const Home = () => {
  const location = useLocation();
  let [collapsed, setCollapsed] = useState(false);
  let [routeKey, setRouteKey] = useState(1);
  // let [isInit, setIsInit] = useState(false);
  let [headerTitle, setHeaderTitle] = useState("");
  let [time, setTime] = useState(moment().format("YYYY/MM/DD HH:mm:ss"));

  setInterval(() => {
    setTime(moment().format("YYYY/MM/DD HH:mm:ss"));
  }, 1000);
  useEffect(() => {
    window.innerWidth < 1300 ? setCollapsed(true) : setCollapsed(false);
  }, []);
  useEffect(() => {
    const routes = matchRoutes(router, location.pathname);
    setRouteKey(routes[1].route.id);
    // setIsInit(true);
    switch (location.pathname) {
      case "/order":
        return setHeaderTitle("订单管理");
      case "/equipent":
        return setHeaderTitle("设备管理");
      case "/user":
        return setHeaderTitle("用户管理");
      case "/log":
        return setHeaderTitle("系统日志");
      case "/reset":
        return setHeaderTitle("重置密码");
      default:
        break;
    }
  }, [location.pathname]);
  function quit() {
    localStorage.setItem("Authorization", "");
    window.location.href = "/login";
  }
  // if (!isInit) {
  //   return null;
  // }
  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo">
          <img src={logo} alt="" />
          {!collapsed && <span style={{ fontStyle: "italic" }}>三和视讯</span>}
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={["1"]}
          selectedKeys={String(routeKey)}
        >
          <Menu.Item key="1" icon={<DatabaseOutlined />}>
            <Link to="/equipent">设备管理</Link>
          </Menu.Item>
          <Menu.Item key="2" icon={<ProfileOutlined />}>
            <Link to="/order">订单管理</Link>
          </Menu.Item>
          <Menu.Item
            style={{ display: localStorage.getItem("role") == 2 ? "none" : "" }}
            key="3"
            icon={<TeamOutlined />}
          >
            <Link to="/user">用户管理</Link>
          </Menu.Item>
          <Menu.Item
            key="4"
            style={{ display: localStorage.getItem("role") == 2 ? "none" : "" }}
            icon={<FileSearchOutlined />}
          >
            <Link to="/log">系统日志</Link>
          </Menu.Item>
          <Menu.Item key="5" icon={<SyncOutlined />}>
            <Link to="/reset">重置密码</Link>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{ paddingLeft: 15, paddingRight: 20 }}
        >
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: "trigger",
              onClick: () => {
                setCollapsed(!collapsed);
              },
            }
          )}
          <span
            style={{
              fontSize: "22px",
              marginLeft: "45px",
            }}
          >
            {headerTitle}
          </span>

          <div className="right" style={{ float: "right", fontSize: "16px" }}>
            {time} &nbsp;&nbsp;&nbsp;用户：
            <span
              style={{
                background: "#777",
                padding: "5px 12px 7px",
                borderRadius: "15px",
                color: "white",
              }}
            >
              {localStorage.getItem("uName")
                ? localStorage.getItem("uName")
                : localStorage.getItem("username")}
            </span>
            &nbsp;&nbsp;&nbsp;
            <Button onClick={quit} type="primary">
              退 出
            </Button>
          </div>
        </Header>
        <Content
          className="site-layout-background"
          style={{
            padding: 24,
            borderTop: "1px solid #aaa",
            minHeight: 100,
            backgroundColor: "#f1f5f9",
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default Home;
